<!--
 * @Author: your name
 * @Date: 2021-12-13 16:30:28
 * @LastEditTime: 2021-12-14 20:03:58
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \day6vue\my-app\src\views\List.vue
-->
<template>
  <div class="list">
      <Header value="发票抬头"></Header>
      <ul class="uls">
        <li v-for="item,index in list" :key="index" @click="toAdd(item.id)">
            <div class="default">
              <span v-if="item.isdefault*1">默认</span>
            </div>
            <div class="list_con">
              <b>{{item.name}}</b>
              <p>{{typeName[item.ind*1]}}</p>
            </div>
        </li>
      </ul>
      <button @click="add">新增发票</button>
  </div>
</template>

<script>
import Header from "../components/Header.vue"
// import axios from "axios"
// 引入请求
import {getinvoice} from "../api/axios"
export default {
  data () {
    return {
      typeName: ["企业", "非企业性单位", "个人"],
      list:[]
    }
  },
  components: {
    Header
  },
  async created () {
    // console.log(req.query);
    // 获取数据
      // let res=await axios.get("/api/invoice")
      let res=await getinvoice()
      // console.log(res);
      if(res.status==200||res.status==201){
          this.list=res.data
      }
  },
  methods: {
      add(){
        // 跳转路由
        this.$router.push({
          path:"/add"
        })
      },
      // 点击列表跳转编辑页面
      toAdd(id){
        this.$router.push({
          path:"/add",
          query:{
            id
          }
        })
      }
  }
}
</script>

<style lang="scss" scoped>
.list{
  width: 100%;
  height: 100%;
  .uls{
    width: 100%;
    li{
      display: flex;
      align-items: center;
      width: 95%;
      height: 40px;
      line-height: 20px;
      margin: 20px 0px;
      .default{
        width: 100px;
        height: 40px;
        display: inline-block;
        text-align: center;
      }
      .list_con{
        line-height: 20px;
      }
    }
  }
}
</style>
